<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 属性(HTML属性  属性名="属性值") 写在标签内,和标签名以一个空格分隔的叫做属性 -->
    <div id="box" class="one two three" title="hello"></div>
</body>
<script>

    // 属性节点 依存于 元素节点 => 一般通过元素节点获取属性节点

    var box = document.getElementById("box");
    console.log(box);




    // Element.getAttribute(attrName)             根据属性名获取属性值
    // Element.setAttribute(attrName,attrValue)   根据属性名设置属性值 (没有就新增 有就修改)
    // Element.removeAttribute(attrName)          根据属性名删除属性

    // 还可以设置自定义属性(是为了保存并使用数据。有些数据可以保存到页面中而不保存到数据库中。)
    // 用户可以按照自己的需求自定义属性(属性名=属性值) =>在标签吗存储一些数据
    // 1. 规定自定义属性以data-开头作为属性名,并赋值  => data-xxx
    // 2. 自定义属性名   xxx="xxx"


    box.setAttribute("asd", "world");
    box.setAttribute("data-index", "0");

    console.log(box.getAttribute("asd"));
    console.log(box.getAttribute("data-index"));


    box.removeAttribute("asd");
    box.removeAttribute("data-index");

    console.log(box);



</script>

</html>